import EventBus from "../../EventBus"
import { mouseStatus,defaultStoreData  } from "../../lib/const"
import { deepCopy, swap, stringify,setMultipleKeys, getComponentListByKeys,ergodicList,updateComponentKey, getParentChildrenByKey,getComponentChildren,removeComponentByKeys, getComponentByKey, getOffsetByCanvas } from "../../lib/utils"
import { componentToPercentage, componentToPx } from "../../lib/unit"

export default function initEvent(vm){
  const lowCode = vm.$store.state.lowCode
  // 上一步
  EventBus.$oneOn("snapshotPrev", ()=> {
    let snapshot = {
      pageSetting: {
        ...defaultStoreData.pageSetting
      },
      canvasComponentList: []
    }
    if(lowCode.snapshotIndex >= 1){
      snapshot = deepCopy(lowCode.snapshotList[lowCode.snapshotIndex - 1])
    }
    vm.setCanvasComponentList(2, snapshot.canvasComponentList, true)
    vm.$store.commit('lowCode/setPageSetting', snapshot.pageSetting)
    vm.$store.commit("lowCode/snapshotPrev")
  })
  // 下一步
  EventBus.$oneOn("snapshotNext", ()=> {
    const snapshot = deepCopy(lowCode.snapshotList[lowCode.snapshotIndex + 1])
    vm.setCanvasComponentList(2, snapshot.canvasComponentList, true)
    vm.$store.commit('lowCode/setPageSetting', snapshot.pageSetting)
    vm.$store.commit("lowCode/snapshotNext")
  })
  // 删除当前选中
  EventBus.$oneOn("delectSelectedComponent", ()=> {
    const {
      multipleKeys,
      canvasComponentList
    } = vm
    removeComponentByKeys(canvasComponentList, multipleKeys)
    vm.setCanvasComponentList()
    vm.isContextmenuShow = false
    vm.setSelectedComponent()
    setMultipleKeys([])
    vm.saveSnapshot({
      canvasComponentList: vm.canvasComponentList
    })
  })
  // 清空画布
  EventBus.$oneOn("deleteAll", ()=> {
    // vm.canvasComponentList = []
    vm.setCanvasComponentList(2, [])
    vm.setSelectedComponent()
    vm.saveSnapshot({
      canvasComponentList: vm.canvasComponentList
    })
  })
  // 点击重置
  EventBus.$oneOn("reset", ()=> {
    // vm.canvasComponentList = []
    
    vm.$store.commit("lowCode/setSnapshotMinIndex", -1)
    vm.setCanvasComponentList(2, [])
    vm.setSelectedComponent()
    vm.$store.commit("lowCode/resetSnapshot")
  })
  // 点击置底
  EventBus.$oneOn("setAtEndSelectedComponent", ()=> {
    const {
      index,
      parent
    } = getParentChildrenByKey(vm.canvasComponentList, vm.selectedComponent.key)
    if(index === 0) {
      vm.$message.warn("当前选中组件已处于顶部,无须置顶")
      return false
    }
    // 替换当前元素和顶部元素的位置
    swap(parent, 0, index)

    vm.setCanvasComponentList()
    vm.saveSnapshot({
      canvasComponentList: vm.canvasComponentList
    })

    // vm.setSelectedComponent()
    vm.isContextmenuShow = false


  })
  // 点击置顶
  EventBus.$oneOn("toppingSelectedComponent", ()=> {
    const {
      index,
      parent
    } = getParentChildrenByKey(vm.canvasComponentList, vm.selectedComponent.key)
    if(index === parent.length - 1) {
      vm.$message.warn("当前选中组件已处于底部,无须置底")
      return false
    }
    // 替换当前元素和底部元素的位置
    swap(parent, parent.length - 1, index)

    vm.setCanvasComponentList()
    vm.saveSnapshot({
      canvasComponentList: vm.canvasComponentList
    })

    // vm.setSelectedComponent()
    vm.isContextmenuShow = false


  })
  // 取消选中右键菜单
  EventBus.$oneOn("cancelSelectedComponent", ()=> {
    vm.isContextmenuShow = false
  })
  // 选中某个组件
  EventBus.$oneOn("selectComponent", (key)=> {
    const type = key ? 1 : 2
    const data = key ? getComponentByKey(vm.canvasComponentList, key) : null
    console.log(getComponentByKey(vm.canvasComponentList, key))
    vm.setSelectedComponent(type, {
      data,
    })
  })

  // 修改当前组件并更新到canvasComponentList
  EventBus.$oneOn("setSelectComponentUpdateList", ({type, data})=> {
    vm.setCanvasComponentList(type, data)
    vm.saveSnapshot({
      canvasComponentList: vm.canvasComponentList
    })
  })

  // 初始化
  EventBus.$oneOn("init", (data)=> {
    vm.setCanvasComponentList(2, data.canvasComponentList)
    vm.$store.commit("lowCode/setSnapshotMinIndex", 0)
    // 清空跳转的过滤条件
    vm.$store.commit('lowCode/setJumpFilterData', {})

    // 清空联动的过滤条件
    vm.$store.commit('lowCode/setLinkageFilterData', [])
    vm.saveSnapshot(data)
  })

  // 点击复制
  EventBus.$oneOn("copy", ()=> {
    const {
      selectedComponent,
      multipleKeys,
      canvasComponentList
    } = vm
    const data = getComponentListByKeys(canvasComponentList, multipleKeys)
    vm.$store.commit("lowCode/setClipboardData", deepCopy(data))
    vm.isContextmenuShow = false
  })

  // 点击粘贴
  EventBus.$oneOn("paste", ()=> {
    const {
      clipboardData,
      clipboardStartPositionOffset,
      multipleKeys,
      canvasComponentList
    } = vm.$store.state.lowCode
    const isMultiple = multipleKeys.length > 1
    clipboardData.forEach((element, index) => {
      // 先将被粘贴的元素(即clipboardData)以及其所有子元素的key全部更新
      element.key = updateComponentKey(element.id)
      // 获取复制组件的children
      const elementChildren = getComponentChildren(element)
      // 如果当前复制元素有children
      if(elementChildren){
        // 更新所有子组件的key
        ergodicList(elementChildren, component => {
          component.key = updateComponentKey(component.id)
        })
      }
      
      // 如果是往组件内粘贴,则必有选中的组件selectedComponent
      // 当前组件是粘贴的容器
      // 获取当前组件的children
      const children = getComponentChildren(vm.selectedComponent)
      let parent
      // 如果当前组件有children,那么父组件就不是当前组件
      if(children){
        parent = children
      }
      // 如果当前组件没有children,那么父组件就不是当前组件,而是当前组件的父组件
      else {
        const data = getParentChildrenByKey(canvasComponentList,vm.selectedComponent.key)
        parent = data.parent
      }
      // 如果点击的是画布
      if(vm.contextmenuType === 'map'){
        parent = canvasComponentList
      }
      
      const {
        offsetLeft,
        offsetTop
      } = isMultiple ? clipboardStartPositionOffset[index] : {offsetLeft: 0,offsetTop: 0 }
      
      const {
        offsetX,
        offsetY
      } = vm.contextmenuPosition
      const {
        left: newLeft,
        top: newTop
      } = componentToPercentage({
        ...element.style,
        left: offsetX + offsetLeft,
        top: offsetY + offsetTop
      })

      element.style.left = newLeft
      element.style.top = newTop
      
      
      parent.push(deepCopy(element))
      
    })
    vm.setCanvasComponentList()
    vm.saveSnapshot({
      canvasComponentList: canvasComponentList,
    })
    vm.isContextmenuShow = false
  })

  EventBus.$oneOn("mouseStatusChange", ()=> {
    vm.$store.commit("lowCode/setMouseStatusChange", mouseStatus.ADD_DRAG)
  })

  // 点击剪切
  EventBus.$oneOn("shear", ()=> {
    const {
      selectedComponent,
      multipleKeys,
      canvasComponentList
    } = vm

    // 先复制
    const data = getComponentListByKeys(canvasComponentList, multipleKeys)
    vm.$store.commit("lowCode/setClipboardData", deepCopy(data))
    // 再删除选中的元素
    EventBus.$emit("delectSelectedComponent")
  })

  
  // 点击组件显示隐藏
  EventBus.$oneOn("setComponentShow", (data)=> {
    const {
      key,
      isShow
    } = data

    const component = getComponentByKey(vm.canvasComponentList, key)
    component.isShow = isShow
    vm.setCanvasComponentList()
    vm.saveSnapshot({
      canvasComponentList: vm.canvasComponentList
    })
  })
  
  // 查看业务组件数据明细
  EventBus.$oneOn("dataDetails", ()=> {
    vm.$refs['detailedRef'].show()
    vm.isContextmenuShow = false
  })
}
